<template>
  <div class="change_image">
    <m-header modile-title="图片改变" go-back="true"></m-header>
    <div class="red" v-show="redshow">
      <span></span>
      <button class="redbutton" @click="redBtn">领取红包</button>
    </div>
    <div class="redopen" v-show="redopenshow">
      <span></span>
      <div class="red-jg">
        <h1>恭喜您！</h1>
        <h5>获得OPPO R15手机一部</h5>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../../assets/css/csshake.min.css";
  .change_image {
    width: 100%;
    background: #fff;
    .red {
      width: 40%;
      padding-top: 100%;
      margin: 20px 30%;
      position: relative;
      span {
        width: 100%;
        height: 100%;
        background: url("./image/red-w.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        position: absolute;
      }
      .redbutton {
        position: absolute;
        top: 38%;
        left: 30%;
        font-size: 14px;
        width: 40%;
        height: 16%;
        border-radius: 100%;
        background: #fdc339;
        color: #fff;
      }
    }
    .redopen {
      width: 40%;
      padding-top: 100%;
      margin: 20px 30%;
      position: relative;
      span {
        width: 100%;
        height: 100%;
        background: url("./image/red-y.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        position: absolute;
      }
      .redbutton {
        position: absolute;
        top: 38%;
        left: 30%;
        font-size: 14px;
        width: 40%;
        height: 16%;
        border-radius: 100%;
        background: #fdc339;
        color: #fff;
      }
      .red-jg {
        position: absolute;
        top: 40%;
        text-align: center;
        padding: 10px;
        h1 {
          font-size: 20px;
          color: #ffc000;
          line-height: 40px;
        }
        h5 {
          color: #fff;
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../components/header'

  export default {
    name: 'ChangeImage',
    data() {
      return {
        redshow:true,
        redopenshow:false
      }
    },
    methods: {
      redBtn(){
        this.redshow = false
        this.redopenshow = true
      }
    },
    components: {
      mHeader,
    }
  }
</script>
